<template>
  <template>
    <view class="page">
      <view v-for="item in content" :key="item.id" class="equip">
        <view class="flex items-center">
          <view class="equip_lable" style="word-break: break-all;white-space: nowrap;">
            设备编号:
          </view>
          <view class="equip_value"
                style="color: blue;font-size: 14px;word-break: break-all;overflow: hidden;white-space: nowrap;">
            {{ item.code }}
          </view>
        </view>
        <view class="flex items-center">
          <view class="equip_lable">
            功能:
          </view>
          <view class="equip_value" style="color: blue;font-size: 14px;">
            {{ item.compent }}
          </view>
        </view>
        <view class="flex items-center">
          <view class="equip_lable">
            开始时间:
          </view>
          <view class="equip_value">
            {{ item.startTime }}
          </view>
        </view>
        <view class="flex items-center">
          <view class="equip_lable">
            结束时间:
          </view>
          <view class="equip_value">
            {{ item.endTime }}
          </view>
        </view>
        <view class="flex items-center">
          <view class="equip_lable">
            模式:
          </view>
          <view class="equip_value">
            {{ item.mode }}
          </view>
        </view>
        <view class="flex items-center" v-if="item.mode==='自动模式' ">
          <view class="equip_lable">
            单点多点:
          </view>
          <view class="equip_value">
            {{ item.point }}
          </view>
        </view>
        <view class="flex items-center">
          <view class="equip_lable">
            暂停次数:
          </view>
          <view class="equip_value">
            {{ (item.pauseTimes ? item.pauseTimes : 0) }}
          </view>
        </view>

        <view class="flex items-center">
          <view class="equip_lable">
            是否异常:
          </view>
          <view class="equip_value">
            {{ (item.isError ? '是' : '否') }}
          </view>
        </view>

        <view class="flex items-center">
          <view class="equip_lable">
            会员昵称:
          </view>
          <view class="equip_value">
            {{ item.vipCode }}
          </view>
        </view>
      </view>

      <wd-pagination v-if="content.length > 0" v-model="pagination.page" :total="pagination.total"
                     @change="handleChange"/>

      <wd-message-box/>
      <view class="empty" v-if="content.length == 0">
        <wd-status-tip image="content" tip="暂无设备运行记录"/>
      </view>
    </view>
  </template>
</template>

<script setup>
import {
  ref,
  reactive
} from 'vue';
import {
  onLoad,
  onPullDownRefresh
} from '@dcloudio/uni-app'

import {getMdDeviceLogDataList} from "@/api/form.js"

const param = ref({})
const content = ref([])
const pagination = reactive({
  page: 1,
  pageSize: 10,
  total: 0
})


onLoad((e) => {
  console.log(e)
  if (e.day) {
    param.day = e.day
    param.compent = e.compent
    uni.setNavigationBarTitle({
      title: ` 设备运行记录`
    })
    init()
  }
})

const init = () => {
  content.value = []

  getMdDeviceLogDataList({
    hasQuery: true,
    pageNo: pagination.page,
    pageSize: pagination.pageSize,
    day: param.day,
    compent: param.compent
  }).then(res => {
    uni.stopPullDownRefresh()
    pagination.total = res?.total||0
    content.value = res?.records || []
  })
}


const handleChange = (e) => {
  pagination.page = e.value

  init()
}
</script>

<style lang="scss">
.empty {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.equip {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 0 4px 0px #efefef;
  padding: 40rpx;
  color: #666;
  font-size: 13px;

  &_name {
    color: #333;
    font-size: 14px;
    margin-bottom: 20rpx;
  }

  &_lable {
    margin-right: 20rpx;
  }
}
</style>
